"use client";
import { useState } from "react";
import React from "react";
import { useRouter } from "next/navigation";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  FileSearchOutlined,
  SnippetsOutlined,
  HomeOutlined,
} from "@ant-design/icons";
import "../index.css";
import { Button, Layout, Menu } from "antd";

import Image from "next/image";
import HeadIcon from "../../../public/computer.svg";
const { Header, Sider, Content } = Layout;

interface Props {
  isShowIcon: boolean;
}

function HeaderIcon(props: Props) {
  const isShowIcon = props.isShowIcon;
  if (isShowIcon)
    return (
      <div className="demo-logo-text-image">
        <Image src={HeadIcon} alt="-.-" width={25} height={25}></Image>
      </div>
    );
  else return <div className="demo-logo-text">Welcome!</div>;
}

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [collapsed, setCollapsed] = useState(false);
  const router = useRouter();

  const RouterChange = (e: any) => {
    router.push(e.key);
  };

  return (
    <Layout style={{ height: "100%" }}>
      <Sider trigger={null} collapsible collapsed={collapsed} breakpoint="lg">
        <div className="demo-logo-vertical">
          <HeaderIcon isShowIcon={collapsed}></HeaderIcon>
        </div>
        <Menu
          onClick={RouterChange}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["approve"]}
          items={[
            {
              key: "/dashboard",
              icon: <HomeOutlined />,
              label: "Disposal List",
            },
            {
              key: "/dashboard/apply",
              icon: <SnippetsOutlined />,
              label: "Data Maintenance",
            },
            {
              key: "/dashboard/search",
              icon: <FileSearchOutlined />,
              label: "Information Inquiry",
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: "rgb(230, 230, 230)",
            boxShadow: "0 0 5px 3px rgba(0, 0, 0, 0.5)",
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: "16px",
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: "16px 16px",
            padding: 24,
            minHeight: 280,
            background: "rgb(200, 200, 200)",
            borderRadius: "10px",
            boxShadow: "0 0 4px 2px rgba(0, 0, 0, 0.5)",
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}
